<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Bar CSS3 Style Classic Untuk Blogger</title>
<style>
/* CSS Menu tempat blogging */
#tempatblogging_classic-menu{width:900px;background:#222 url(http://4.bp.blogspot.com/-iSR65vMqirU/UcFvtpl7FaI/AAAAAAAAAoI/8dAchRZoF8c/s1600/tempatbloggingfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#tempatblogging_classic-menu ul,#tempatblogging_classic-menu li{margin:0 auto;padding:0 0;list-style:none}
#tempatblogging_classic-menu ul{height:35px;width:980px}
#tempatblogging_classic-menu li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#tempatblogging_classic-menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#tempatblogging_classic-menu li a:hover{color:#fff}
#tempatblogging_classic-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#tempatblogging_classic-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#tempatblogging_classic-menu label span{font-size:12px;position:absolute;left:35px}
#tempatblogging_classic-menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#tempatblogging_classic-menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#tempatblogging_classic-menu ul.menus a{color:#333}
#tempatblogging_classic-menu li:hover ul.menus{display:block}
#tempatblogging_classic-menu a.prett{padding:0 27px 0 14px}
#tempatblogging_classic-menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#tempatblogging_classic-menu ul.menus a:hover{background:#ddd;color:#333}
.page-tempatblogging_classic-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-tempatblogging_classic-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-tempatblogging_classic-menu ul li{list-style:none;line-height:32px;display:inline-block}
.page-tempatblogging_classic-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-tempatblogging_classic-menu li a:hover,.page-tempatblogging_classic-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
</style>
</head>

<body>
<div id="tempatblogging_classic-menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a class="prett" href="#">Drop list</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a class="prett" href="#">Drop list 1</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
